/* jshint esversion: 6 */

const path = require('path');
//只要是插件，都要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');
//vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//这个配置文件其实就是一个JS文件，通过Node中的模块操作，向外部暴露一个配置对象

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    //指定输入文件
    entry: path.join(__dirname, './src/main.js'),
    //输出文件相关配置
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },

    //根据给定的路径在内存中生成页面
    //在内存生成的页面中，自动把打包好的bundle.js文件，注入为一个script标签
    //npm 先安装，然后再webpack.config中导入插件，新增plungins插件节点
    plugins: [
        //创建一个在内存中生成html的插件
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html' //指定生成页面名称
        }),
        new VueLoaderPlugin()
    ],
    //用来配置非JS文件的对应loader的
    module: {
        //非JS文件和loader之间的对应关系
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //创建处理CSS文件的loader匹配规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理less文件的规则
            { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] }, //配置处理sass文件的规则
            { test: /\.jpg|\.png|\.gif|\.bmp$/, use: 'url-loader?limit=2900' }, //配置处理样式表中的图片的loader规则
            //可以使用？给url-loader传递参数，其中一个固定参数limit，表示图片大小，单位是byte字节
            //如果指定limit参数，则只有图片的大小小于给定的值时，才会转为base64格式的图片，否则不转换
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //exclude排除不转换的包，打包时忽略node_modules下所有JS文件，否则无法运行
            { test: /\.vue$/, use: 'vue-loader' }, //解析vue组件的loader
            { test: /\.ttf|woff|woff2|eot|svg|otf$/, use: 'url-loader' } //处理样式中字体文件路径
        ]
    },
    resolve: {
        // alias: { //别名
        //     'vue$': 'vue/dist/vue.js'
        // }
    }
};